<template>
  <div class="login">
    <div class="login-block">
      <div class="show">
        <img :src="showImg" alt="" />
      </div>
      <div class="submit">
        <div class="logo">
          <img :src="logoImg" alt="logo" />
        </div>
        <el-form :rules="rules" ref="ruleForm" :model="form" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="form.username"
              @keyup.native.enter="onSubmit"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              type="password"
              @keyup.native.enter="onSubmit"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="s-identify">
            <el-input v-model="checkCode" placeholder=""></el-input>
            <div @click="refreshCode">
              <s-identify :identifyCode="identifyCode"></s-identify>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import SIdentify from '@/components/SIdentify'
export default {
  components: {
    SIdentify
  },
  data() {
    return {
      logoImg: 'https://s1.ax1x.com/2020/11/07/B48dY9.png',
      showImg: 'https://s1.ax1x.com/2020/11/07/B48noQ.jpg',
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      identifyCodes: '1234567890',
      identifyCode: '',
      // text框输入的验证码
      checkCode: ''
    }
  },
  created() {
    this.refreshCode()
  },
  mounted() {
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  methods: {
    // 验证码相关方法-返回随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },

    // 验证码相关方法-刷新验证码
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 验证码相关方法-返回验证码正确数据
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
      // console.log(this.identifyCode)
    },
    onSubmit() {
      if (this.checkCode === '') {
        this.$message.error('请输入验证码')
        return
      }
      if (this.identifyCode !== this.checkCode) {
        this.checkCode = ''
        this.refreshCode()
        this.$message.error('请输入正确的验证码')
        return
      }

      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await this.$http.post('/login', {
            username: this.form.username,
            password: this.form.password
          })
          console.log(res)

          const {
            data,
            meta: { msg, status }
          } = res.data

          if (status === 200) {
            this.$message({
              message: msg,
              type: 'success'
            })

            // 登录成功，存储 token，转入主页
            // localStorage.setItem('token', data.token)
            window.sessionStorage.setItem('username', data.username)
            // 改用 sessionStorage 保存（浏览器关闭后登录状态失效）
            window.sessionStorage.setItem('token', data.token)
            this.$router.push('/')
          } else {
            this.$message.error(msg)
          }
        } else {
          this.$message.error('填入项未通过验证')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style lang="less">
.login {
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-block {
    width: 100%;
    min-width: 1060px;
    padding: 50px 20px;
    background-color: #e7e9ed;
    border-radius: 5px;
    box-shadow: 0px 0px 8px #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;

    .show {
      height: 400px;
      width: 600px;
      margin-right: 20px;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .submit {
      height: 400px;
      width: 400px;
      border-radius: 5px;
      background-color: #ffffff;
      .logo {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        img {
          height: 80%;
          margin-top: 20px;
        }
      }
      .el-form-item {
        .el-input {
          width: 280px;
          .el-input__inner {
            background-color: #eeeeee;
          }
        }
      }
    }
  }
}
// 暂未做注册
</style>
